<template>
  <div class=" flex flex-col base-width">
    <div class=" base-width h-[460px] flex flex-row">
      <index-swiper></index-swiper>
    </div>
  </div>
  <div class=" base-width h-[170px]  mt-[25px]">
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="h-full grid grid-cols-3 box-border bg-[#5f5750]">
          <div class=" flex flex-col border solid white justify-center items-center">
            <img class="w-[24px] h-[24px]" src="../../assets/img/icon/01.png">
            <p class=" text-[white]">保障服务</p>
          </div>
          <div class=" flex flex-col border solid white justify-center items-center">
            <img class="w-[24px] h-[24px]" src="../../assets/img/icon/02.png">
            <p class=" text-[white]">企业团购</p>
          </div>
          <div class=" flex flex-col border solid white justify-center items-center">
            <img class="w-[24px] h-[24px]" src="../../assets/img/icon/03.png">
            <p class=" text-[white]">F码通道</p>
          </div>
          <div class=" flex flex-col border solid white  justify-center items-center">
            <img class="w-[24px] h-[24px]" src="../../assets/img/icon/04.png">
            <p class=" text-[white]">米粉卡</p>
          </div>
          <div class=" flex flex-col border solid white justify-center items-center">
            <img class="w-[24px] h-[24px]" src="../../assets/img/icon/05.png">
            <p class=" text-[white]">以旧换新</p>
          </div>
          <div class=" flex flex-col border solid white  justify-center items-center">
            <img class="w-[24px] h-[24px]" src="../../assets/img/icon/06.png">
            <p class=" text-[white]">话费充值</p>
          </div>
        </div>
      </el-col>
      <el-col :span="6" class=" h-[170px] ">
        <img src="../../assets/img/001.jpg" class="w-full h-full" alt="">
      </el-col>
      <el-col :span="6" class=" h-[170px] ">
        <img src="../../assets/img/002.jpg" class="w-full h-full" alt="">
      </el-col>
      <el-col :span="6" class=" h-[170px] ">
        <img src="../../assets/img/003.jpg" class="w-full h-full" alt="">
      </el-col>
    </el-row>
  </div>

  <div class=" bg-[#f3f4f6] mt-[20px] pt-[20px]">
    <img src="../../assets/img/0e2b43800d3e1ef40470ac04b3e0140b.webp" class="base-width h-[120px] " alt="">
    <!-- 手机 -->
    <div class=" base-width mt-[20px]">
      <div class=" flex flex-row justify-between">
        <span class=" text-[26px] text-[gray]">手机</span>
        <span class=" text-[20px] text-[gray] cursor-pointer" @click="toSearch(1)">查看更多</span>
      </div>
      <div class="goods-grid-box mt-[10px] pb-10 base-width grid grid-cols-5 gap-4">
        <div class="goods-grid-item w-[235px] h-[300px] bg-white" :class="{ '-lastitem': index === 10 }"
          v-for="(item, index) in phoneList" :key="item.id" @click="toGoodsDetail(item)">
          <div v-if="item.goods_status === 2 || item.goods_status === 4" class="goods_status"
            :class="'goods_status-' + item.goods_status">
            {{ ["", "上架", "预售", "正常", "促销"][item.goods_status] }}
          </div>
          <div class=" flex flex-col justify-center items-center leading-8">
            <img :src="baseURL + item.goods_photo[0]" class="w-[160px] h-[160px]" alt="">
            <p>{{ item.goods_name }}</p>
            <p class=" text-[gray] overflow-ellipsis overflow-hidden ">
              {{ txtEllipsis(item.goods_brief_o, 12) }}
            </p>
            <div>
              <span class="text-[orangered]">{{ item.goods_sale_price }}元起</span>
              <span class="mx-[5px] text-[12px] line-through ">{{ item.goods_price }}元</span>
            </div>
          </div>
        </div>
        <div class="goods-grid-box w-[235px] h-[300px] flex flex-col justify-between">
          <div class="goods-grid-item  w-[235px] h-[140px] bg-white flex flex-row items-center " v-for="(item, index) in phoneLast
            " :key="item.id" @click="toGoodsDetail(item)">
            <img class=" m-[20px] w-[80px] h-[80px]" :src="baseURL + item.goods_photo[0]" alt="">
            <div class=" flex flex-1 flex-col justify-center items-center leading-6">
              <p class=" text-[8px]">{{ item.goods_name }}</p>
              <p class=" text-[6px] text-[gray]">
                {{ txtEllipsis(item.goods_brief_o, 7) }}
              </p>
              <div>
                <span class="text-[9px] text-[orangered]">{{ item.goods_sale_price }}</span>
                <span class="text-[9px] line-through ">{{ item.goods_price }}元</span>
              </div>
            </div>
          </div>
          <div class=" w-[235px] h-[140px] bg-white flex flex-row items-center ">
            <div class="m-[45px]">
              <p class=" text-[22px] cursor-pointer" @click="toSearch(1)">浏览更多</p>
              <p class=" text-[12px] text-[gray]">热门</p>
            </div>
            <el-icon style="font-size: 22px; color:orangered ;">
              <ArrowRight />
            </el-icon>
          </div>
        </div>
      </div>
    </div>

    <!-- 电视 -->
    <div class=" base-width mt-[20px]">
      <div class=" flex flex-row justify-between">
        <span class=" text-[26px] text-[gray]">电视</span>
        <span class=" text-[20px] text-[gray] cursor-pointer" @click="toSearch(2)">查看更多</span>
      </div>
      <div class="goods-grid-box mt-[10px] pb-10 base-width grid grid-cols-5 gap-4">
        <div class="goods-grid-item w-[235px] h-[300px] bg-white" :class="{ '-lastitem': index === 10 }"
          v-for="(item, index) in tvList" :key="item.id" @click="toGoodsDetail(item)">
          <div v-if="item.goods_status === 2 || item.goods_status === 4" class="goods_status"
            :class="'goods_status-' + item.goods_status">
            {{ ["", "上架", "预售", "正常", "促销"][item.goods_status] }}
          </div>
          <div class=" flex flex-col justify-center items-center leading-8">
            <img :src="baseURL + item.goods_photo[0]" class="w-[160px] h-[160px]" alt="">
            <p>{{ item.goods_name }}</p>
            <p class=" text-[gray] overflow-ellipsis overflow-hidden ">
              {{ txtEllipsis(item.goods_brief_o, 12) }}
            </p>
            <div>
              <span class="text-[orangered]">{{ item.goods_sale_price }}元起</span>
              <span class="mx-[5px] text-[12px] line-through ">{{ item.goods_price }}元</span>
            </div>
          </div>
        </div>
        <div class="goods-grid-box w-[235px] h-[300px] flex flex-col justify-between">
          <div class="goods-grid-item  w-[235px] h-[140px] bg-white flex flex-row items-center " v-for="(item, index) in tvLast
            " :key="item.id" @click="toGoodsDetail(item)">
            <img class=" m-[20px] w-[80px] h-[80px]" :src="baseURL + item.goods_photo[0]" alt="">
            <div class=" flex flex-1 flex-col justify-center items-center leading-6">
              <p class=" text-[8px]">{{ item.goods_name }}</p>
              <p class=" text-[6px] text-[gray]">
                {{ txtEllipsis(item.goods_brief_o, 7) }}
              </p>
              <div>
                <span class="text-[9px] text-[orangered]">{{ item.goods_sale_price }}</span>
                <span class="text-[9px] line-through ">{{ item.goods_price }}元</span>
              </div>
            </div>
          </div>
          <div class=" w-[235px] h-[140px] bg-white flex flex-row items-center ">
            <div class="m-[45px]">
              <p class=" text-[22px] cursor-pointer" @click="toSearch(2)">浏览更多</p>
              <p class=" text-[12px] text-[gray]">热门</p>
            </div>
            <el-icon style="font-size: 22px; color:orangered ;">
              <ArrowRight />
            </el-icon>
          </div>
        </div>
      </div>
    </div>

    <!-- 笔记本 -->
    <div class=" base-width mt-[20px]">
      <div class=" flex flex-row justify-between">
        <span class=" text-[26px] text-[gray]">笔记本</span>
        <span class=" text-[20px] text-[gray] cursor-pointer" @click="toSearch(3)">查看更多</span>
      </div>
      <div class="goods-grid-box mt-[10px] pb-10 base-width grid grid-cols-5 gap-4">
        <div class="goods-grid-item w-[235px] h-[300px] bg-white" :class="{ '-lastitem': index === 10 }"
          v-for="(item, index) in matebookList" :key="item.id" @click="toGoodsDetail(item)">
          <div v-if="item.goods_status === 2 || item.goods_status === 4" class="goods_status"
            :class="'goods_status-' + item.goods_status">
            {{ ["", "上架", "预售", "正常", "促销"][item.goods_status] }}
          </div>
          <div class=" flex flex-col justify-center items-center leading-8">
            <img :src="baseURL + item.goods_photo[0]" class="w-[160px] h-[160px]" alt="">
            <p>{{ item.goods_name }}</p>
            <p class=" text-[gray] overflow-ellipsis overflow-hidden ">
              {{ txtEllipsis(item.goods_brief_o, 12) }}
            </p>
            <div>
              <span class="text-[orangered]">{{ item.goods_sale_price }}元起</span>
              <span class="mx-[5px] text-[12px] line-through ">{{ item.goods_price }}元</span>
            </div>
          </div>
        </div>
       
      </div>
    </div>

    <!-- 其他 -->
    <div class=" base-width mt-[20px]">
      <div class=" flex flex-row justify-between">
        <span class=" text-[26px] text-[gray]">其他</span>
        <span class=" text-[20px] text-[gray] cursor-pointer" @click="toSearch()">查看更多</span>
      </div>
      <div class="goods-grid-box mt-[10px] pb-10 base-width grid grid-cols-5 gap-4">
        <div class="goods-grid-item w-[235px] h-[300px] bg-white" :class="{ '-lastitem': index === 10 }"
          v-for="(item, index) in otherList" :key="item.id" @click="toGoodsDetail(item)">
          <div v-if="item.goods_status === 2 || item.goods_status === 4" class="goods_status"
            :class="'goods_status-' + item.goods_status">
            {{ ["", "上架", "预售", "正常", "促销"][item.goods_status] }}
          </div>
          <div class=" flex flex-col justify-center items-center leading-8">
            <img :src="baseURL + item.goods_photo[0]" class="w-[160px] h-[160px]" alt="">
            <p>{{ item.goods_name }}</p>
            <p class=" text-[gray] overflow-ellipsis overflow-hidden ">
              {{ txtEllipsis(item.goods_brief_o, 12) }}
            </p>
            <div>
              <span class="text-[orangered]">{{ item.goods_sale_price }}元起</span>
              <span class="mx-[5px] text-[12px] line-through ">{{ item.goods_price }}元</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { txtEllipsis } from "../utils/StringUtils";
import { ArrowRight, List } from "@element-plus/icons-vue";
import API from "../utils/API";
import { inject, ref, reactive } from "vue";
import { useRouter } from "vue-router";

const baseURL = inject("baseURL");
const router = useRouter();
//手机
const phoneList = ref([]);
const phoneLast = ref([]);
//电视
const tvList = ref([]);
const tvLast = ref([]);
//笔记本
const matebookList = ref([]);
const matebookLast = ref([]);
//其它，4-10
const otherList = ref([]);

const getGoodsList = () => {
  //手机列表
  API.goodsInfo.getListByParentId(1).then(result => {
    phoneList.value = result.slice(0, ~~(result.length / 5) * 5 - 1);
    phoneLast.value = result.slice(-1);
    console.log(result);
  });
  //电视列表
  API.goodsInfo.getListByParentId(2).then(result => {
    tvList.value = result.slice(0, ~~(result.length / 5) * 5 - 1);
    tvLast.value = result.slice(-1);
  });
  //笔记本列表
  API.goodsInfo.getListByParentId(3).then(result => {
    matebookList.value = result.slice(0, ~~(result.length / 5) * 5 - 1);
    // matebookLast.value = result.data.slice(-1);
  });
  //其他列表
  Promise.all([
    API.goodsInfo.getListByParentId(4),
    API.goodsInfo.getListByParentId(5),
    API.goodsInfo.getListByParentId(6),
    API.goodsInfo.getListByParentId(7),
    API.goodsInfo.getListByParentId(8),
    API.goodsInfo.getListByParentId(9),
    API.goodsInfo.getListByParentId(10)
  ]).then(results => {
    let arr = [];
    for (let item of results) {
      arr.push(...item);
    }
    otherList.value = arr.slice(0, ~~(arr.length / 5) * 5)
  }).catch(err => {
    console.log(err)
  })
}
getGoodsList();

/**
 * 去商品的详细页面
 */
const toGoodsDetail = (item) => {
  window.open(router.resolve({ name: "goodsDetail", params: { id: item.id } }).href);
}

/**
 * 点击更多以后，去到同类型产品页，也就是search.vue的页面
 */
const toSearch = products_id => {
  window.open(router.resolve({ name: "search", query: { products_id } }).href);
}


</script>
<style scoped lang="scss">
:deep(.el-main) {
  --el-main-padding: 0px;
}

:deep(.el-carousel__container) {
  height: 100%;
}

.goods-grid-item {
  position: relative;

  &:hover {
    box-shadow: 0 0 10px 5px lightgray;
    transform: translateY(-3px);
    cursor: pointer;
  }

  .goods_status {
    @apply text-[12px] absolute left-0 right-0 m-auto px-[8px] py-[2px];
    width: fit-content;
    color: #fff;
    background-color: lightseagreen;

    &-2 {
      background-color: #1abc9c;
    }

    &-4 {
      background-color: #e60012;
    }
  }
}
</style>